<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>余额查询</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
    body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: #f7fafd; }
    .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; background: linear-gradient(180deg, #1a355b 80%, #1976d2 100%); border-radius: 0 18px 18px 0; box-shadow: 2px 0 8px #e3eaf2; padding: 32px 0; margin: 0; display: flex; flex-direction: column; gap: 0; z-index: 100; }
    .sidebar-title { font-size: 26px; font-weight: bold; color: #fff; letter-spacing: 2px; padding: 0 32px 18px 32px; margin-bottom: 10px; border-bottom: 2px solid #fff2; display: flex; align-items: center; gap: 12px; }
    .sidebar ul { list-style: none; padding: 0; margin: 0; }
    .sidebar li { margin: 0 0 8px 0; }
    .sidebar a, .sidebar .sidebar-btn { display: flex; align-items: center; gap: 12px; font-size: 18px; padding: 14px 32px; border-radius: 16px; background: transparent; color: #fff; border: none; transition: 0.2s; text-decoration: none; text-align: left; cursor: pointer; }
    .sidebar a:hover, .sidebar .sidebar-btn:hover, .sidebar .active { background: #fff; color: #1976d2; font-weight: bold; }
    .sidebar .logout { margin-top: 32px; background: #e3eaf2; color: #1976d2; }
    .sidebar .logout:hover { background: #1976d2; color: #fff; }
    .main-content { margin-left: 260px; flex: 1; display: flex; flex-direction: column; align-items: center; background: #f7fafd; min-width: 350px; max-width: 1000px; }
    .card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px #e3eaf2; padding: 36px 48px 32px 48px; margin: 40px 0 0 0; width: 100%; max-width: 900px; }
    h2 { color: #1976d2; margin-bottom: 24px; }
    form { margin-bottom: 32px; }
    .form-group { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin-bottom: 20px; }
    input[type="text"], input[type="password"], input[type="number"] { padding: 12px 16px; border: 2px solid #e3eaf2; border-radius: 8px; font-size: 16px; width: 220px; box-sizing: border-box; }
    input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus { outline: none; border-color: #1976d2; }
    .refresh-btn { background: #1976d2; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: 0.2s; }
    .refresh-btn:hover { background: #1565c0; }
    .balance-info { font-size: 18px; margin: 20px 0; text-align: center; }
    .balance-info span { color: #1976d2; font-weight: bold; }
    .update-time { color: #666; font-size: 14px; text-align: center; margin-top: 16px; }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-title"><i class="fa-solid fa-user"></i> 客户菜单</div>
        <ul>
            <li><a class="sidebar-btn active" href="{{ url_for('customer_balance') }}"><i class="fa-solid fa-wallet"></i> 查询余额</a></li>
            <li><a class="sidebar-btn" href="{{ url_for('customer_deposit') }}"><i class="fa-solid fa-piggy-bank"></i> 存款</a></li>
            <li><a class="sidebar-btn" href="{{ url_for('customer_withdraw') }}"><i class="fa-solid fa-money-bill-wave"></i> 取款</a></li>
            <li><a class="sidebar-btn" href="{{ url_for('customer_transfer') }}"><i class="fa-solid fa-exchange-alt"></i> 转账</a></li>
            <li><a class="sidebar-btn" href="{{ url_for('customer_change_pwd') }}"><i class="fa-solid fa-key"></i> 修改密码</a></li>
            <li><a class="sidebar-btn" href="{{ url_for('customer_report_loss') }}"><i class="fa-solid fa-exclamation-triangle"></i> 挂失</a></li>
            <li><a class="sidebar-btn" href="{{ url_for('customer_unreport_loss') }}"><i class="fa-solid fa-check-circle"></i> 解挂</a></li>
        </ul>
        <a href="{{ url_for('logout') }}" class="sidebar-btn logout"><i class="fa-solid fa-arrow-right-to-bracket"></i> 退出登录</a>
    </div>
    <div class="main-content">
        <div class="welcome-info" style="font-size:18px;color:#1976d2;margin-bottom:6px;">欢迎登录：{{ session['customer_name'] }}</div>
        <div class="cardid-info" style="font-size:15px;color:#1976d2;margin-bottom:18px;">卡号：{{ session['cardID'] }}</div>
        <div class="card">
            <h2 class="form-title"><i class="fa-solid fa-wallet"></i> 余额查询</h2>
            <form method="post">
                <div class="form-group">
                    <label for="cardmima">银行卡密码：</label>
                    <input type="password" id="cardmima" name="cardmima" required placeholder="请输入银行卡密码">
                    <button type="submit" class="balance-btn" style="margin-left:16px;"><i class="fa-solid fa-search"></i> 查询</button>
                </div>
            </form>
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
              {% endif %}
            {% endwith %}
            {% if balance is not none %}
            <div class="balance-info">您的当前余额为：<span>{{ balance }}</span> 元</div>
            {% endif %}
            <div class="update-time">最后更新时间：{{ update_time if update_time else '--' }}</div>
        </div>
    </div>
</body>
</html> 